<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>task2</title>
    <link rel="stylesheet" href="css/task_2.css">
</head>
<body>
<nav>
    <h1><img src="baidu.gif" alt=""></h1>
    <ul>
        <li><a href="#">导航链接1</a></li>
        <li><a href="#">导航链接2</a></li>
        <li><a href="#">导航链接3</a></li>
        <li><a href="#">导航链接4</a></li>
    </ul>
</nav>
<div class="article">
    <h2>文章一级标题</h2>
    <h3>文章二级标题</h3>
    <span>文章作者</span>
    <span>文章发表时间</span>
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，<b>这是一个加粗字体</b>
        这是一个很长很长的段落，这是一个很长很长的段落。<a href="http://ife.baidu.com" target="_blank">这里有一个链接到http://ife.baidu.com</a>
        这是一个很长很长的段落，这是一个很长很长的段落。</p> <img src="img.jpg" alt="mm">
    <p>
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，<b>这是一个加粗字体</b>
        这是一个很长很长的段落，这是一个很长很长的段落。<a href="http://ife.baidu.com" target="_blank">这里有一个链接到http://ife.baidu.com</a>
        这是一个很长很长的段落，这是一个很长很长的段落。
    </p>
</div>
<div class="article">
    <h1>另一篇文章的一级标题</h1>
    <h2>文章二级标题</h2>
    <span>文章作者</span> <span>文章发表时间</span>
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
        这是一个很长很长的段落，这是一个很长很长的段落，<b>这是一个加粗字体</b>
        这是一个很长很长的段落，这是一个很长很长的段落。<a href="http://ife.baidu.com" target="_blank">这里有一个链接到http://ife.baidu.com</a>
        这是一个很长很长的段落，这是一个很长很长的段落。</p> <img src="img.jpg" alt="mm">
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
        <li>列表项四</li>
    </ul>
</div>
<div class="article" >
    <h1>图片</h1>
    <p>好看的<b>图片</b></p>
    <img src="img.jpg" alt="">
    <p>好看的<b>图片</b></p>
    <img src="img.jpg" alt=""><p>好看的<b>图片</b></p>
    <img src="img.jpg" alt=""><p>好看的<b>图片</b></p>
    <img src="img.jpg" alt=""><p>好看的<b>图片</b></p>
    <img src="img.jpg" alt=""><p>好看的<b>图片</b></p>
    <img src="img.jpg" alt=""><p>好看的<b>图片</b></p>
    <img src="img.jpg" alt=""><p>好看的<b>图片</b></p>
    <img src="img.jpg" alt=""><p>好看的<b>图片</b></p>
    <img src="img.jpg" alt="">
</div>
<div class="article">
    <h1>最后一级标题</h1>
    <h2>文章二级标题</h2>
    <span>文章作者</span><span>文章发表时间</span>
    <ol>
        <li>排名1</li>
        <li>排名2</li>
        <li>排名3</li>
    </ol>
    <p>这是一个表格，给表格加了border</p>
    <table border="0" id="count">
        <tbody>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>表内容单元格</td><td>表内容单元格</td>
            <td>
                <a href="#">操作</a>
            </td>
        </tr>
        <tr>
            <td>表内容单元格</td><td>表内容单元格</td>
            <td>
                <a href="#">操作</a>
            </td>
        </tr>
        <tr>
            <td>表内容单元格</td><td>表内容单元格</td>
            <td>
                <a href="#">操作</a>
            </td>
        </tr>
        <tr>
            <td>总计</td>
            <td colspan="2">1000</td>
        </tr>
        </tbody>
    </table>
</div>
<div class="article" id="lastOne">
    <h2>这是最后一个侧栏</h2>
    <form action="" id="form">
        <h3>侧栏注册窗口标题</h3>
        <p><label>请输入邮箱地址：<input type="email" placeholder="这是一个邮箱输入框"></label></p>
        <p>邮箱地址请按要求格式输入</p>
        <p><label>请输入密码：<input type="password" placeholder="请输入密码"></label></p>
        <p>密码请为英文</p>
        <label>性别：</label>
        <input type="radio" checked="checked" name="sex1">男</input>
        <input type="radio" name="sex1">女</input> <br>
        <p><label>城市：</label>
        <select name="" id="">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </select></p>
        <p>爱好：
        <input type="checkbox">篮球
        <input type="checkbox">排球
        <input type="checkbox">足球</p>
        <br>
        <p>个人描述：</p>
        <textarea placeholder="这是一个多行输入框,输入您的个人描述"></textarea> <br>
        <input type="submit" value="确认提交" id="submit">
    </form>
</div>
<footer>版权所有</footer>
</body>
</html>
































